<template>
    <div class="top-bar">
        <div>
            <router-link :to="url">
                <span :style="{borderColor:color}"></span>
            </router-link>

            <h1 :style="{color:color}">{{title}}</h1>
        </div>
        <div>{{action}}</div>
    </div>
</template>

<script>
    export default {
        props:['title','action','color','url'],
        name: "TopBar",
    }
</script>

<style lang="stylus" scoped>
   .top-bar
     display flex
     height 0.34rem
     justify-content space-between

     div:nth-child(1)
       display flex

     div:nth-child(2)
       font-weight 600
       font-size 0.12rem
       margin 0.03rem 0.05rem 0 0

     span
         height 0.1rem
         width 0.1rem
         border-left 0.02rem solid black
         border-bottom 0.02rem solid black
         transform rotate(45deg)
         background-color transparent
         display block
         margin 0.08rem 0 0 0.05rem

      h1
          font-size 0.18rem
          font-weight 900
          margin 0 0 0  0.05rem
</style>